<template>
    <div>
        <transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
            <div class="importTemp" v-show="importShow" v-position="importConfig">
                <div class="flexbetween">
                    <p>{{importConfig.title}}</p>
                    <el-button size="small" type="primary" plain @click="downloadFile">下载模板</el-button>
                </div>
                <div class="flexbetween">
                    <div class="fileDiv">
                        <p :title="fileName">{{fileName?fileName:"选择文件..."}}</p>
                        <span class="iconfont icon-guanbi2" v-show="fileName != ''" @click="clear"></span>
                        <input type="file" @change="fileChange($event)" :id="id" style="display:none"
                               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel " />
                    </div>
                    <div style="flex-shrink: 0">
                        <el-button size="small" type="primary" plain @click="addFile">添加</el-button>
                        <el-button size="small" type="primary" plain @click="importFile">导入</el-button>
                    </div>
                </div>
                <div class="footer">
                    <el-button size="small" type="text" @click="hide">取消</el-button>
                    <el-button type="primary" size="small" @click="hide">保存</el-button>
                </div>
            </div>
        </transition>
    </div>
</template>

<script>
import { importFile } from "@/api/knowledge";
import { lingYanUpload } from "@/utils/upload";
export default {
    name: "importTemp",
    props: {
        importShow: {
            type: Boolean,
            default: true
        },
        importConfig: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            id: "",
            file: null,
            fileName: "",
        }
    },
    created() {
        this.id = "importFile" + (new Date().getTime()) + ((Math.random() * 1000).toFixed(0) + "");
    },
    methods: {
        downloadFile() {
            window.location = this.importConfig.downloadUrl;
        },
        addFile() {
            document.getElementById(this.id).click();
        },
        fileChange(event) {
            this.file = event.target.files[0];
            this.fileName = event.target.files[0].name;
        },
        async importFile() {
            var _that = this;
            if (!this.file) {
                return this.$antMessage.warning("请先选择文件");
            }
            var uuid = "uuid-" + new Date().getTime();
            var upload = await lingYanUpload(this.file, uuid);
            if (upload?.data?.remoteURL) {
                const loading = this.$loading({
                    lock: true,
                    text: '导入中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var i = upload.data.remoteURL.lastIndexOf("&");
                var fileUrl = upload.data.remoteURL.substring(0, i);
                if (_that.importConfig.importParam) {
                    var param = Object.assign({}, { fileUrl }, _that.importConfig.importParam);
                } else {
                    var param = { fileUrl };
                }
                importFile(this.importConfig.importUrl, param).then(resp => {
                    loading.close();
                    if (resp.status == 0) {
                        this.$antMessage.success("导入成功");
                        this.$emit("importSuccess");
                        this.$emit("update:importShow", false);
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }
        },
        clear() {
            this.file = null;
            this.fileName = "";
            document.getElementById(this.id).value = "";
        },
        hide() {
            this.clear();
            this.$emit("update:importShow", false);
        }
    },
    directives: {
        position: {
            inserted(el, bind) {
                var css = bind.value.css;
                for (let key in css) {
                    el.style[key] = css[key];
                }
            }
        }
    }
}
</script>

<style lang="scss">
.importTemp {
    position: fixed;
    width: 680px;
    height: 250px;
    background: #fff;
    border-radius: 4px;
    padding: 60px 20px 0 50px;
    box-shadow: 0px 3px 15px 0px rgba(102, 112, 123, 0.2);
    z-index: 1900;
    .flexbetween {
        margin-bottom: 20px;
        .fileDiv {
            position: relative;
            width: calc(100% - 180px);
            border: 1px solid #dae1e9;
            border-radius: 6px;
            height: 34px;
            line-height: 34px;
            padding: 0 15px;
            color: #90979d;
            p {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .iconfont {
                cursor: pointer;
                position: absolute;
                right: 5px;
                top: 0;
                font-size: 15px;
                color: #b7c1c9;
                &:hover {
                    color: #abb4bc;
                }
            }
        }
        .el-button {
            margin-left: 20px;
        }
    }
    .footer {
        position: absolute;
        right: 20px;
        bottom: 20px;
        button {
            margin-left: 20px;
        }
        .el-button--text {
            padding-left: 20px;
            padding-right: 20px;
            color: #676e75;
            font-size: 14px;
            &:hover {
                background: #f5f7fa;
            }
            &:focus {
                background: #eaeef4;
            }
        }
    }
}
</style>